<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script>
    var chart = echarts.init(document.getElementById('container'));
var option = {
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ": " + params.value;
        }
    },
    series: [
        {
            type: 'map',
            map: 'china',
            label: {
                show: true
            },
            data: [
                { name: '北京', value: '2000' },
                { name: '上海', value: '1800' },
                { name: '广东', value: '2200' },
            ]
        }
    ]
};
chart.setOption(option);

  window.onload = function() {
    // Make sure the function is available after page load
    console.log('Page loaded');
  };

    // Make the updateTooltip function globally accessible via window
    window.updateTooltip = function(city, newText) {
        console.log(`Updating tooltip for city: ${city}, new text: ${newText}`);
        let newData = option.series[0].data.map(item => {
            if (item.name === city) {
                return { ...item, value: newText };
            }
            return item;
        });

        option.series[0].data = newData;
        chart.setOption(option);
    };

// 用于说明 Dart/JS 互操作的简短 JavaScript 代码示例
window.myTopLevel = {
  field1: 0,
  method2() {
  console.log(`更新 ${this.field1} 的提示文本：${this.field1}`);
    return this.field1;
  }
}

 function updateTooltip(city, newText) {
    console.log(`更新 ${city} 的提示文本：${newText}`);
    let newData = option.series[0].data.map(item => {
        if (item.name === city) {
            return { ...item, value: newText };
        }
        return item;
    });
    option.series[0].data = newData;
    chart.setOption(option);
};

</script>
</body>
</html>